<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
       
    </div>
</body>
<script type="module">
    // 整体载入  => 查看模块内暴露的变量和方法
    import * as Vue from "../js/vue.esm-browser.js";
    console.log(Vue);

    // 按需引入
    import { createApp, ref, reactive, computed, watch, watchEffect,readonly } from "../js/vue.esm-browser.js";
    import { toRef ,isRef,isReactive,isReadonly,isProxy} from "../js/vue.esm-browser.js";
    import {  onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "../js/vue.esm-browser.js";


    // 组合式写法 可以理解为是选项式语法的优化, 但是最终还是会被解析成选项式语法
    // 在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性
    let app = createApp({
        setup() {

            
            let count = ref(1);
            let zhang = reactive({name:"张三",age:18});


            // readonly() 返回原值的只读代理
            let count1 = readonly(count);
            let zhang1 = readonly(zhang);
            console.log(count);
            console.log(zhang);
            console.log(count1);
            console.log(zhang1);

            // console.log(isRef(count));
            // console.log(isRef(zhang));
            // console.log(isRef(count1));
            // console.log(isRef(zhang1));

            // console.log(isReactive(count));
            // console.log(isReactive(zhang));
            // console.log(isReactive(count1));
            // console.log(isReactive(zhang1));


            // console.log(isReadonly(count));
            // console.log(isReadonly(zhang));
            // console.log(isReadonly(count1));
            // console.log(isReadonly(zhang1));

            // console.log(isProxy(count));
            // console.log(isProxy(zhang));
            // console.log(isProxy(count1));
            // console.log(isProxy(zhang1));

            return {
                count
            }
        },

        // 声明周期钩子选项式写法
        mounted() {
            console.log("mounted1", this);
        },
        mounted() {
            console.log("mounted2", this);
        },
    })

    app.mount("#app");
</script>

</html>